<template>
  <div class="div">
    <!--搜索框-->
    <el-row>
      <el-col :span="3" class="grid">
        <el-input
          v-model="intxt"
          placeholder="请输入内容"
          size="mini"
        ></el-input>
      </el-col>
      <el-col :span="1" class="grid">
        <el-button type="success" icon="el-icon-search" size="mini"
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <br />
    <!--表格数据及操作-->
    <el-table
      :data="products"
      border
      style="width: 100%"
      stripe
      ref="multipleTable"
      tooltip-effect="dark"
    >
      <!--勾选框-->
      <el-table-column type="selection" width="55" label="序号">
      </el-table-column>
      <!--索引-->
      <el-table-column type="index" :index="indexMethod"> </el-table-column>
      <el-table-column prop="id" label="书籍编号" width="180" sortable>
      </el-table-column>
      <el-table-column prop="name" label="书籍名称"> </el-table-column>
      <el-table-column prop="price" label="书籍价格" width="180">
      </el-table-column>
      <el-table-column prop="category" label="书籍分类" width="180">
      </el-table-column>
      <el-table-column prop="pnum" label="库存" width="180"> </el-table-column>
      <el-table-column prop="imgurl" label="书籍图片" width="180">
      </el-table-column>
      <el-table-column prop="description" label="书籍介绍" width="180">
      </el-table-column>
      <el-table-column label="编辑" width="100">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="edit(scope.$index)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="删除" width="100">
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="del(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!--新增按钮-->
    <el-col :span="2" class="grid">
      <el-button
        type="success"
        icon="el-icon-circle-plus-outline"
        size="mini"
        round
        @click="add()"
        >新增</el-button
      >
    </el-col>
    <!--删除所选按钮-->
    <el-col :span="1" class="grid">
      <el-button
        type="danger"
        icon="el-icon-delete"
        size="mini"
        round
        @click="delSelect()"
        >删除所选</el-button
      >
    </el-col>
    <br />
    <!--分页条-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="page.totalRecords"
      :page-size="page.pageSize"
      @current-change="currentChange()"
    >
    </el-pagination>

    <!-- 新增商品信息模态框 -->
    <el-dialog
      title="新增书籍"
      :visible="addProductForm"
      size="tiny"
      :modal-append-to-body="false"
      @close="closeDialog"
    >
      <el-form
        id="#addgForm"
        ref="addgForm"
        :model="addgForm"
        label-width="80px"
      >
        <el-form-item label="书籍名称" prop="name">
          <el-input
            v-model="addgForm.name"
            placeholder="请输入书籍名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="书籍价格"
          prop="price"
          aria-placeholder="请输入书籍名称"
        >
          <el-input v-model="addgForm.price"></el-input>
        </el-form-item>
        <el-form-item label="书籍分类" prop="category">
          <el-input
            v-model="addgForm.category"
            placeholder="请输入书籍类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="pnum">
          <el-input v-model="addgForm.pnum"></el-input>
        </el-form-item>
        <el-form-item label="书籍图片" prop="imgurl">
          <el-input
            v-model="addgForm.imgurl"
            placeholder="请插入书籍图片"
          ></el-input>
        </el-form-item>
        <el-form-item label="书籍介绍" prop="description">
          <el-input
            v-model="addgForm.description"
            placeholder="请输入书籍介绍"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="productAdd()">确定</el-button>
          <el-button
            @click="
              addProductForm = false;
              canceladdT('formt');
            "
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑商品信息模态框 -->
    <el-dialog
      title="修改商品信息"
      :visible="editProductForm"
      size="tiny"
      :modal-append-to-body="false"
      @close="closeDialog"
    >
      <el-form
        id="#editgForm"
        ref="editgForm"
        :model="editgForm"
        label-width="80px"
      >
        <el-form-item label="书籍编号" prop="id">
          <el-input v-model="editgForm.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="书籍名称" prop="name">
          <el-input v-model="editgForm.name"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" prop="price">
          <el-input v-model="editgForm.price"></el-input>
        </el-form-item>
        <el-form-item label="书籍分类" prop="category">
          <el-input v-model="editgForm.category"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="pnum">
          <el-input v-model="editgForm.pnum"></el-input>
        </el-form-item>
        <el-form-item label="书籍图片" prop="imgurl">
          <el-input v-model="editgForm.imgurl" :disabled="true"></el-input>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleChange"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="书籍介绍" prop="description">
          <el-input v-model="editgForm.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="productEdit()">确定</el-button>
          <el-button
            @click="
              editProductForm = false;
              canceladdT('formt');
            "
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import myapi from "../api";
export default {
  name: "product",
  data() {
    return {
      //表格数据
      products: [],
      //新增商品暂时存放在这里
      addgForm: {
        name: "",
        price: 0,
        category: "",
        pnum: 0,
        imgurl: "",
        description: "",
      },
      //修改的商品信息暂时存放在这里
      editgForm: {
        id: "",
        name: "",
        price: 0,
        category: "",
        pnum: 0,
        imgurl: "",
        description: "",
      },
      addProductForm: false, //当为真时，增加商品窗口显示
      editProductForm: false, //当为真时，商品信息修改窗口显示
      editIndex: 0,
      //查询输入框数据
      intxt: "",
      //导航条默认选项
      activeIndex: "1",
      activeIndex2: "1",
      page: {
        pageSize: 10, //每页条数,  默认10条
        totalRecords: 0, //总条数
        totalPages: 0, //总页数
        pageNum: 0,
      },
    };
  },
  mounted() {
    axios.get(myapi.allProduct.url).then((response) => {
      let res = response.data;
      if (res.code == 10) this.products = res.data;
      else {
        this.$message.error("查询失败");
      }
    });
    this.page.totalRecords = this.products.length;
    this.page.totalPages = this.page.totalRecords / this.page.pageSize + 1;
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    indexMethod(index) {
      return index;
    },
    add() {
      //新增按钮
      this.addProductForm = true;
    },
    productAdd() {
      //该方法做的工作：发起后端访问，请求后端往数据库中添加记录，如果成功，则记录添加data中products数组中，添加窗口隐藏，如果失败，则弹出对话框，添加失败

      axios
        .post(myapi.AddProduct.url, { products: this.addgForm })
        .then((res) => {
          console.log(res.data.code);
          if (this.addgForm.name == "") {
            this.$message.error("添加失败");
            return;
          }
          if (res.data.code == 10) {
            this.products.push(this.addgForm);
            this.addProductForm = false;
            this.$message.info("添加成功");
          } else this.$message.error("添加失败");
        })
        .catch((res) => {
          this.$message.error("添加失败");
        });
      // 如果后端返回成功，则做下面工作

      // 如果后端返回失败，则做下面工作，弹出对话框
      // this.$message.error("添加失败");
    },
    closeDialog() {
      this.addProductForm = false;
      this.editProductForm = false;
    },
    edit(index) {
      this.editIndex = index;
      this.editgForm = this.products[index];
      this.editProductForm = true;
    },
    productEdit() {
      //点击编辑窗口的确定按钮执行这里请求后端往数据库中修改记录，如果成功，则修改data中products数组中对应元素，编辑窗口隐藏，如果失败，则弹出对话框，编辑失败
      axios
        .post(myapi.EdiProduct.url, { products: this.editgForm })
        .then((res) => {
          if (res.data.code == 38) {
            this.products[this.editIndex] = this.editgForm;
            this.editProductForm = false;
            this.$message.info("修改成功");
          } else this.$message.error("修改失败");
        })
        .catch((res) => {});
      // 如果后端返回成功，则做下面工作

      // 如果后端返回失败，则做下面工作，弹出对话框
      // this.$message.error("添加失败");
    },
    del(index) {
      this.$confirm(
        "此操作将永久删除商品 " + this.products[index].name + ", 是否继续?",
        "提示",
        { type: "warning" }
      )
        .then(() => {
          //点击确定删除执行这里
          //向后端发起请求，后端在数据库中删除该记录，如果成功，这里要在data中products数组删除元素，如果失败给提示
          this.$message({
            type: "success",
            message: "删除成功!",
          });

          axios
            .post(mysql.DetProduct.url, { products: this.editgForm })
            .then((res) => {
              if (res.data.code == 39) {
                this.products.splice(index, 1);
                this.$message.info("删除成功！");
              }
            })
            .catch((res) => {
              this.$message.info("删除操作失败！");
            });
          // 如果后端返回成功，则做下面工作
        })
        .catch(() => {
          this.$message.info("已取消操作!");
        }); //点击取消删除执行这里
    },
    delSelect() {},
    // // 每页显示多少条数据
    // sizeChange(val) {
    //     this.page.pageSize = val;
    // },
    //翻页
    currentChange(val) {
      this.page.pageNum = val - 1;
    },
  },
};
</script>

<style>
.div {
  margin: 50px auto;
}
</style>